<template>
  <div class="app-container">
    <el-card class="box-card" style="background-color: #e9ecef">
      <div slot="header" class="clearfix">
        <span style="font-size: xx-large">{{ title }}</span>
      </div>
      <el-table
        :data="gradeData"
        style="width: 100%">
        <el-table-column
          :formatter="handleName"
          prop="name"
          label="打分人"/>
        <el-table-column prop="score" label="分数"/>
      </el-table>
      <p v-text="tip"/>
      <el-divider v-if="visible"/>
      <router-link
        :inline="true"
        :to="{
          path: '/student/analyse',
          query: {
            replyId: this.$route.query.replyId
          }
        }"
        class="inlineBlock">
        <el-button v-if="visible" type="primary" style="width: 100%">查看成绩分析</el-button>
      </router-link>
    </el-card>
  </div>
</template>

<script>
import studentReplyApi from '@/api/student/reply'

export default {
  data() {
    return {
      title: '',
      tip: '',
      visible: false,
      groupNums: [],
      gradeData: []
    }
  },
  created() {
    this.getReplyInfo()
  },
  methods: {
    getReplyInfo() {
      studentReplyApi.getReplyById(this.$route.query.replyId).then(res => {
        this.title = res.result.title
        this.tip = '，其中学生匿名打分成绩占比' + res.result.weight + '%'
        this.visible = res.result.visible === 1
        studentReplyApi.getGroupById(res.result.groupId).then(res => {
          this.groupNums = res.result.members
          this.getGradeData()
        }).catch(error => {
          console.log(error)
        })
      }).catch(error => {
        console.log(error)
      })
    },
    getGradeData() {
      studentReplyApi.getScoreById(this.$route.query.replyId).then(res => {
        this.gradeData = res.result
        this.tip = '您的总成绩为' + this.gradeData.pop().score + this.tip
      }).catch(error => {
        console.log(error)
      })
    },
    handleName(data) {
      if (data.markId === '0') {
        return '匿名'
      }
      return this.groupNums.find((num) => {
        return num.id === data.markId
      }).name
    }
  }
}
</script>

